<nz-layout class="layout-wrapper">
    <nz-header class="nz-header">
        <div class="logo">{{config.websiteTitle}}</div>
        <div class="header-icon" (click)="showConfirm()">
            <kylin-icon class="primary-font-color" icon="poweroff"></kylin-icon>
        </div>

        <div class="header-avatar">
            <kylin-skin></kylin-skin>
        </div>

        <div class="header-avatar">
            <nz-dropdown [nzPlacement]="'bottomRight'">
                <div nz-dropdown class="nz-dropdown-menu-wrap clearfix">
                    <div class="header-icon">
                        <nz-badge [nzCount]="homeService.msgData.count">
                            <kylin-icon icon="bell" theme="fill" class="primary-font-color"
                                        style="font-size: 21px"></kylin-icon>
                        </nz-badge>
                    </div>
                </div>
                <ul nz-menu class="nz-dropdown-menu home-message">
                    <nz-tabset style="width: 300px">
                        <nz-tab *ngFor="let item of homeService.msgData.notifications"
                                [nzTitle]="item.title|translateText">
                            <ng-container *ngFor="let i of item.data">
                                <p class="message-subTitle skin-color">{{i.name|translateText}}</p>

                                <li nz-menu-item *ngFor="let child of i.data"
                                    [ngStyle]="{'backgroundColor':'transparent'}" [routerLink]="i.path"
                                    [queryParams]='{afbmStatus: child.key}'>
                                    {{child.key|kylinInfoState}}<span>({{child.value}})</span>
                                </li>
                            </ng-container>
                        </nz-tab>
                    </nz-tabset>

                </ul>
            </nz-dropdown>
        </div>

        <div class="header-icon header-home" (click)="skip('/home/system-home-page/home-page')">
            <kylin-icon class="primary-font-color" icon="home" theme="fill"></kylin-icon>
        </div>

        <div class="header-avatar">
            <nz-dropdown [nzPlacement]="'bottomRight'"
                         [(nzVisible)]="dropDownVisible">
                <div nz-dropdown class="nz-dropdown-menu-wrap">
                    <nz-avatar [nzSize]="'large'" nzIcon="anticon anticon-user"
                               [nzSrc]="avatar"></nz-avatar>
                    <span class="welcome-message">{{'匿名'}}</span>
                </div>
                <ul nz-menu class="nz-dropdown-menu">
                    <li nz-menu-item class="clearfix user-info-title" [ngStyle]="{'backgroundColor': 'transparent'}">
                        <span style="float: left">客户信息</span>
                        <span style="float: right">
                            <a [routerLink]="'/home/system-home-page/set-account'">账户设置</a>
                        </span>
                    </li>
                    <li nz-menu-item [ngStyle]="{'backgroundColor': 'transparent'}">•
                        账户级别：{{'管理员'}}</li>
                    <li nz-menu-item [ngStyle]="{'backgroundColor': 'transparent'}">•
                        本次登录：{{13457895| kylinDatePipe:'YYYY-MM-DD HH:mm:ss'}}</li>
                    <li nz-menu-item [ngStyle]="{'backgroundColor': 'transparent'}">•
                        登录地区：{{'陕西西安'}}</li>
                    <li nz-menu-item [ngStyle]="{'backgroundColor': 'transparent'}">•
                        上次登录：{{12345678| kylinDatePipe:'YYYY-MM-DD  HH:mm:ss'}}</li>
                    <li nz-menu-item [ngStyle]="{'backgroundColor': 'transparent'}" [routerLink]="'/previews'">•
                        更多功能： <span class="skin-color-hover" style="cursor: pointer">预览模块</span>
                    </li>
                </ul>
            </nz-dropdown>
        </div>

    </nz-header>

    <nz-layout class="layout-nz-content">

        <nz-sider [nzWidth]="nzWidth" class="nz-sider">
            <kylin-side-menu [width]="'200px'" [sidebarMenuData]="sidebarMenuList"></kylin-side-menu>
        </nz-sider>

        <nz-layout style="overflow: -moz-scrollbars-none;background-color:#F6F7FC;">
            <nz-content class="nz-content">
                <div class="home-content">
                    <router-outlet></router-outlet>
                </div>
            </nz-content>
        </nz-layout>
    </nz-layout>
</nz-layout>
